<template>
  <div class="servcearea-detail">
    <Header :title="serviceAreaList.serviceAreacode"/>
    <div class="detail-head">
      <div class="head">
        <div class="total-num">{{serviceAreaList.parkingcount}}</div>
        <div class="total">总泊位数</div>
        <div class="percent">
          <ul class="left">
            <li>{{serviceAreaList.spackcount}}</li>
            <li>空泊车数</li>
          </ul>
          <ul class="middle">
            <li>{{serviceAreaList.utilization}}%</li>
            <li>利用率</li>
          </ul>
          <ul class="right">
            <li>{{serviceAreaList.free}}%</li>
            <li>占用率</li>
          </ul>
        </div>
      </div>
    </div>
    <!--   表格区域-->
    <div class="traffic" id="myChart" style="width: 100%; height: 326px;background-color: #fff;margin-left: 5px"></div>
    <!--    数字区域-->
    <div class="body">
      <div class="item">
        <ul>
          <li>{{serviceAreaList.parkinglongtime}}</li>
          <li>平均停放时长</li>
        </ul>
        <ul>
          <li>{{serviceAreaList.income}}</li>
          <li>收益</li>
        </ul>
      </div>
      <div class="item num">
        <ul>
          <li>{{serviceAreaList.parkingflow}}</li>
          <li>入场总车次</li>
        </ul>
        <ul>
          <li>{{serviceAreaList.peopleflow}}</li>
          <li>服务人群数</li>
        </ul>
      </div>
      <div class="item event">
        <ul>
          <li>{{serviceAreaList.evnetcount}}</li>
          <li>事件</li>
        </ul>
        <ul>
          <li>{{serviceAreaList.updatecount}}</li>
          <li>维修次数</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from './../../../../components/Header/Header'
import echarts from 'echarts'

let option
// eslint-disable-next-line no-unused-vars
const ydata = []
export default {
  name: 'ServiceAreaDetail',
  data () {
    return {
      // 服务区编号
      serviceAreacode: '',
      // 服务区详情列表
      serviceAreaList: {},
      // 从服务区传递过来的服务区详情信息
      serviceDetail: {}

    }
  },
  created () {
    // 在这里可以接收服务区页面传递过来的id
    // console.log(this.$route.query.item)
    this.serviceAreacode = this.$route.query.id
    this.serviceDetail = this.$route.query.item
  },
  components: {
    Header
  },
  mounted () {
    // 绘制收入表格
    this.drawLine()
    this.getServiceArea()
  },
  methods: {
    drawLine () {
      this.chartLine = echarts.init(document.getElementById('myChart'))
      // 指定图表的配置项和数据
      option = {
        // 添加主标题
        title: {
          text: '今日停放量',
          textStyle: {
            color: '#2e2e2e',
            fontSize: 17.5
          }
        },
        tooltip: { // 设置tip提示
          trigger: 'axis'
        },
        color: ['#efefef'], // 设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: { // 设置x轴
          type: 'category',
          boundaryGap: false, // 坐标轴两边不留白
          // data: [],
          data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
          name: '时间轴', // X轴 name
          nameTextStyle: { // 坐标轴名称的文字样式
            color: '#807F7F',
            fontSize: 10,
            padding: [70, 15, 0, 15],
            align: 'right',
            lineHeight: 122
          },
          axisLine: { // 坐标轴轴线相关设置。
            lineStyle: {
              color: '#000',
              type: 'dotted'
            }
          }
        },
        yAxis: {
          name: '停放量',
          nameTextStyle: {
            color: '#807F7F',
            fontSize: 10
          },
          axisLine: {
            lineStyle: {
              color: '#000',
              type: 'dotted'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted'
            },
            show: true
          },
          type: 'value'
        },
        series: [
          {
            name: '停放量',
            data: ydata,
            // data: [40, 60, 180, 140, 240, 30, 200, 140],
            type: 'line', // 类型为折线图
            symbol: 'circle', // 修改拐点的样式
            showSymbol: true, // 是否显示
            symbolInnerColor: '#1ec6c4',
            lineStyle: { // 线条样式 => 必须使用normal属性
              normal: {
                color: '#1ec6e4'
              },
              type: 'dotted'
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option, { notMerge: true })
    },
    // 根据服务区编号查看服务区详情
    async getServiceArea () {
      const result = await this.$http.post('/api/fictitious/PostServiceArea', { serviceAreacode: this.serviceAreacode })
      this.serviceAreaList = result.data.data
      // console.log(this.serviceAreaList)
      option.series[0].data.push(...this.serviceAreaList.todayflow)
    }
  }
}
</script>

<style scoped lang="less">
  .servcearea-detail {
    .detail-head {
      background-color: #f5f5f6;
      padding: 6px 6px 15px;
      margin-top: -15px;
      margin-bottom: 18px;

      .head {
        overflow: hidden;
        background: linear-gradient(to bottom, #4885f2, #4278ed, #3563e5);
        background: -webkit-linear-gradient(to bottom, #4885f2, #4278ed, #3563e5);
        background: -ms-linear-gradient(to bottom, #4885f2, #4278ed, #3563e5);
        background: -webkit-linear-gradient(to bottom, #4885f2, #4278ed, #3563e5);

        .total-num {
          text-align: center;
          font-size: 45px;
          color: #fffffd;
          margin-bottom: 14px;
          margin-top: 25px;
        }

        .total {
          text-align: center;
          color: #fff;
          font-size: 12px;
          letter-spacing: 1px;
          margin-bottom: 26px;
        }

        .percent {
          overflow: hidden;
          padding: 0 15px;
          position: relative;
          margin-bottom: 14px;

          .left, .middle, .right {
            float: left;
            color: #fff;
            text-align: center;
            letter-spacing: 1px;

            li:nth-child(1) {
              font-size: 18px;
              margin-bottom: 15px;
              font-weight: 600;
            }

            li:nth-child(2) {
              font-size: 12px;
            }
          }

          .right {
            float: right;
          }

          .middle {
            position: absolute;
            top: 22px;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }

    .body {
      padding: 0 50px;
      text-align: center;

      .item {
        overflow: hidden;
        text-align: center;
        border-bottom: 1px solid #f5f5f6;
        padding-top: 12px;

        ul {
          float: left !important;
          width: 50%;

          li:nth-child(1) {
            margin-bottom: 15px;
            font-size: 24px;
            font-weight: 700;
          }

          li:nth-child(2) {
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 13px;
            color: #979797;
          }
        }

        ul:nth-child(1) {
          li:nth-child(1) {
            color: #52a4f1;
          }
        }

        ul:nth-child(2) {
          li:nth-child(1) {
            color: #fbbc18;
          }
        }
      }

      .num, .event {
        text-align: center;

        ul {
          li:nth-child(1) {
            color: #646162 !important;
          }
        }
      }
    }
  }
</style>
